<template>
  <div id="app">
    <a-layout class="app-container">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
        @select="handleMenuClick">
        <el-menu-item index="0">
          <img style="width: 80px ; height: 60px;" src="/src/assets/logo/loginLogo.png" alt="Element logo" />
        </el-menu-item>
        <el-menu-item index="/" key="1">
          <HomeOutlined /> <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/data-test" key="2">
          <ApiOutlined />
          <span>排期计划</span>
        </el-menu-item>
        <el-menu-item index="/visualization" key="3">控制台</el-menu-item>
        <el-menu-item index="/configuration" key="4">配置</el-menu-item>
        <el-menu-item index="/exampleApi" key="5">API示例</el-menu-item>
      </el-menu>
      <a-layout-content class="app-main">
        <router-view />
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  SettingOutlined,
  ReloadOutlined,
  HomeOutlined,
  BarChartOutlined,
  ApiOutlined,
  LineChartOutlined
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

export default {
  name: 'App',
  components: {
    SettingOutlined,
    ReloadOutlined,
    HomeOutlined,
    BarChartOutlined,
    ApiOutlined,
    LineChartOutlined
  },
  setup() {
    const router = useRouter()
    const route = useRoute()

    const selectedKeys = computed(() => [route.path])

    const refreshData = () => {
      message.success('数据刷新成功')
    }

    const handleMenuClick = (index) => {
      console.log(index) // 现在会正确输出选中项的index
      // 排除logo项的点击事件
      if (index !== "0") {
        router.push(index)
      }
    }


    return {
      selectedKeys,
      refreshData,
      handleMenuClick,
    }

  }
}
</script>

<style scoped>
.app-container {
  /* Occupy full viewport height, and stack vertically */
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.app-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.app-sidebar {
  background-color: #001529;
}

.sidebar-menu {
  border-right: none;
  height: 100%;
}

/* The app-main content flex:1 so it takes up remaining space after the menu */
.app-main {
  background-color: #f0f2f5;
  padding: 20px;
  flex: 1;
  overflow: auto;
}
</style>